<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('用户列表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<body class="gray-bg">
<div id="west" class="ui-layout-west">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> 单位
            </div>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
                        class="fa fa-chevron-up"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
                        class="fa fa-chevron-down"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i
                        class="fa fa-refresh"></i></button>
            </div>
        </div>
        <div class="treeSearchInput" id="search">
            <label for="keyword">单位名称：</label><input type="text" class="empty" id="keyword" maxlength="50">
            <button class="btn" id="btn" onclick="$.tree.searchNode()"> 搜索 </button>
        </div>
        <div class="btn-group-xs"  style="margin-top: 10px;margin-left: 5px">
            <a class="btn-primary btn" onclick="checkYiji()">选中所有一级单位</a>
            <a class="btn-info btn" onclick="checkErji()">选中所有二级单位</a>
            <a class="btn-warning btn" onclick="checkSanji()">选中所有三级单位</a>
        </div>
        <div class="ui-layout-content" style="margin-top: 15px;">
            <div id="tree" class="ztree"></div>
        </div>
    </div>
</div>

<div id="center" class="ui-layout-center">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="user-form">
                    <input type="hidden" id="deptId" name="deptid">
                    <input type="hidden" id="parentId" name="parentId">
                    <div class="select-list">
                        <ul>
                            <li>
                                用户名：<input type="text" name="loginName"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="chongzhi()"><i
                                        class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="col-sm-6 select-table-overwrite table-striped" style="overflow: auto;" >
                <div style="text-align: center"><span style="font-size: x-large;color: black;">单位用户</span></div>
                <table id="bootstrap-table" ></table>
            </div>
            <div class="col-sm-6 select-table-overwrite table-striped" style="overflow: auto;">
                <div style="text-align: center"><span style="font-size: x-large;color: black;">接收人</span></div>
                <table id="bootstrap-table2"></table>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script th:inline="javascript">
    var prefix = ctx + "system/user";

    var jieshourenlist = []
    $(function () {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 0});
        // 回到顶部绑定
        if ($.fn.toTop !== undefined) {
            var opt = {
                win: $('.ui-layout-center'),
                doc: $('.ui-layout-center')
            };
            $('#scroll-up').toTop(opt);
        }
        queryUserList();
        queryDeptTree();
        $("#bootstrap-table2").bootstrapTable({
            pagination: false,
            height:600,
            columns: [
                {
                    field: 'userId',
                    title: '用户ID',
                    visible:false
                },
                {
                    field: 'userName',
                    title: '用户名称',
                    halign:"center",
                    align:"center"
                },
                {
                    field: 'remove',
                    title: '操作',
                    halign:"center",
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="removeSelect('+row.userId+')"<i class="fa fa-remove">删除</i></a> ');
                        return actions.join('');
                    }
                }
            ],

        });
    });

    function queryUserList() {
        var options = {
            url: prefix + "/deptTreeUserList",
            sortName: "createTime",
            sortOrder: "desc",
            modalName: "用户",
            showRefresh:false,
            showSearch:false,
            showToggle:false,
            showColumns:false,
            pagination: false,
            height: 600,
            columns: [{
                checkbox: true,
            },
                {
                    field: 'userId',
                    title: '用户ID',
                    visible:false
                },
                {
                    field: 'userName',
                    title: '用户名称',
                    halign:"center",
                    align:"center"
                }
            ],
            onCheck: function (row, $element) {
                if(jieshourenlist.every(item => item.userId != row.userId)) {
                    jieshourenlist.push(row)
                }
                $("#bootstrap-table2").bootstrapTable('load', jieshourenlist);
            },
            onUncheck: function (row, $element) {
                jieshourenlist = jieshourenlist.filter(item => item.userId != row.userId)
                $("#bootstrap-table2").bootstrapTable('load', jieshourenlist);
            },
            onCheckAll: function (rows) {
                for(var row of rows) {
                    if(jieshourenlist.every(item => item.userId != row.userId)) {
                        jieshourenlist.push(row)
                    }
                }
                $("#bootstrap-table2").bootstrapTable('load', jieshourenlist);
            },
            onUncheckAll: function (rowsAfter, rowsBefore) {
                for(var row of rowsBefore) {
                    jieshourenlist = jieshourenlist.filter(item => item.userId != row.userId)
                }
                $("#bootstrap-table2").bootstrapTable('load', jieshourenlist);
            }
        };
        $.table.init(options);
    }

    function queryDeptTree() {
        var url = ctx + "system/user/deptTree";
        var options = {
            url: url,
            expandLevel: 2,
            onClick: zOnClick,
            onCheck:zonCheck,
            check: {
                enable: true,             // 置 zTree 的节点上是否显示 checkbox / radio
            },
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            $("#deptId").val(treeNode.id);
            $("#parentId").val(treeNode.pId);
            $.table.search();
        }
        function zonCheck(event, treeId, treeNode) {
            var list =new Array(0);
            if(treeNode.isParent==true) {
                    getAllchild(treeNode,list)
            }
            list.push(treeNode.id)
            $.ajax({
                type: "post",
                url: "/system/user/deptTreeUser",
                data: {
                    deptid:list.join(",")
                },
                success: function(result) {
                    if (result.code == 0) {
                        for(var row of result.data) {
                            if(treeNode.checked==true) {
                                if (jieshourenlist.every(item => item.userId != row.userId)) {
                                    jieshourenlist.push(row)
                                }
                            }else {
                                jieshourenlist = jieshourenlist.filter(item => item.userId != row.userId)
                            }
                        }
                        $("#bootstrap-table2").bootstrapTable('load', jieshourenlist);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("勾选单位失败");
                }
            });
        }
    }

    $('#btnExpand').click(function () {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function () {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function () {
        queryDeptTree();
    });

    function getSelections(){
        return jieshourenlist
    }

    function getAllchild(treeNode,list){
        if(treeNode.isParent==true) {
            treeNode.children.forEach((item) => {
                list.push(item.id)
                getAllchild(item,list)
            })
        }else{
            list.push(treeNode.id)
        }
    }

    function removeSelect(userId){
        jieshourenlist = jieshourenlist.filter(item => item.userId != userId)
        $("#bootstrap-table2").bootstrapTable('load', jieshourenlist);
    }
    function chongzhi(){
        $("#deptId").val('');
        $("#parentId").val('');
        $.form.reset()
    }

    function checkYiji() {
        $.get("/system/user/deptTree", (res)=>{
            let tmp = [];
            res.forEach(e => {
                if(e.jigoujibie=="1") tmp.push(e.id)
            })
            $.ajax({
                type: "post",
                url: "/system/user/deptTreeUser",
                data: {
                    deptid:tmp.join(",")
                },
                success: function(result) {
                    if (result.code == 0) {
                        for(var row of result.data) {
                            if (jieshourenlist.every(item => item.userId != row.userId)) {
                                jieshourenlist.push(row)
                            }
                        }
                        $("#bootstrap-table2").bootstrapTable('load', jieshourenlist);
                    }
                }

            });
        });
    }

    function checkErji() {
        $.get("/system/user/deptTree", (res)=>{

            let tmp = [];
            res.forEach(e => {
                if(e.jigoujibie=="2") tmp.push(e.id)
            })
            $.ajax({
                type: "post",
                url: "/system/user/deptTreeUser",
                data: {
                    deptid:tmp.join(",")
                },
                success: function(result) {
                    if (result.code == 0) {
                        for(var row of result.data) {
                            if (jieshourenlist.every(item => item.userId != row.userId)) {
                                jieshourenlist.push(row)
                            }
                        }
                        $("#bootstrap-table2").bootstrapTable('load', jieshourenlist);
                    }
                }

            });
        });
    }
    function checkSanji() {
        $.get("/system/user/deptTree", (res)=>{

            let tmp = [];
            res.forEach(e => {
                if(e.jigoujibie=="3") tmp.push(e.id)
            })
            $.ajax({
                type: "post",
                url: "/system/user/deptTreeUser",
                data: {
                    deptid:tmp.join(",")
                },
                success: function(result) {
                    if (result.code == 0) {
                        for(var row of result.data) {
                            if (jieshourenlist.every(item => item.userId != row.userId)) {
                                jieshourenlist.push(row)
                            }
                        }
                        $("#bootstrap-table2").bootstrapTable('load', jieshourenlist);
                    }
                }

            });
        });
    }


</script>
</body>

</html>
<style>
    .select-table-overwrite{
        background: #fff;
        border-radius: 6px;
        margin-top: 10px;
        padding-top: 5px;
        padding-bottom: 13px;
        box-shadow: 1px 1px 3px rgba(0,0,0,.2);
    }
    #west{
        width: 350px !important;
    }
    #center{
        width: 1050px !important;
        position: relative !important;
    }
    .disabled{
        background-color: lightgrey !important;
    }
    .fixed-table-toolbar{
        display: none;
    }
</style>